<template>
  <div>
    <el-dialog
      :visible="showDialog"
      :before-close="handleClose"
      :class="{'mobile-el-dialog': showMobilePage}"
      width="480px"
      center
      class="limit-dialog">
      <div class="top-title">
        <img :src="tipIcon" alt="tip_icon">
        <span class="top-text">{{ `以下${type?'客户欠款额度':'销售外采额度'}不足，无法操作订单` }}</span>
      </div>
      <el-table
        :data="data"
        class="limit-table">
        <el-table-column v-if="type" label="客户名称" width="150px">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.customer" />
          </template>
        </el-table-column>
        <el-table-column v-else label="销售" width="100px">
          <template slot-scope="scope">
            <div>{{ scope.row.market }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="type?'欠款额度':'外采额度'" width="200px">
          <template slot-scope="scope">
            <div><span class="red-text">{{ numberTextFormat(scope.row.amount) }}</span>/{{ numberTextFormat(scope.row.total) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="110px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">申请提高额度</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import tipIcon from '@/assets/customer/tip_icon.png';
import ElMessage from '@/utils/message';
import { hasRouteAuth } from '@/utils/permission';
import { numberTextFormat } from '@/filters/number';
import { LEVEL_CHANGE_TYPE } from '@/utils/const/customer';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      tipIcon,
      showDialog: false,
      data: [],
      type: 0 // 0:销售,1:客户
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    hasRouteAuth,
    numberTextFormat,
    initData(type, data) {
      this.type = type;
      this.data = data;
      this.showDialog = true;
    },
    handleClick(val) {
      if (this.type) {
        if (!this.hasRouteAuth('crm:customerAdjustment:create')) {
          ElMessage.warning('请联系管理员添加权限！');
          return;
        }
        const url = this.$router.resolve({
          name: 'customerAdjustmentCreate',
          query: {
            customerId: val.customerId,
            customerName: val.customer,
            applyType: LEVEL_CHANGE_TYPE.AMOUNT
          }
        });
        window.open(url.href, '_blank');
      } else {
        if (!this.hasRouteAuth('crm:externalHarvest:create')) {
          ElMessage.warning('请联系管理员添加权限！');
          return;
        }
        const url = this.$router.resolve({
          name: 'externalHarvestCreate',
          query: {
            userId: val.marketId
          }
        });
        window.open(url.href, '_blank');
      }
    },
    handleClose() {
      this.data = [];
      this.showDialog = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.limit-dialog {
  ::v-deep {
    .el-dialog {
      border-radius: 12px;
    }
    .el-dialog__header {
      margin: 0;
      padding: 0;
    }
    .el-dialog__body {
      padding: 0 0 24px;
    }
  }
}
.limit-table {
  padding: 0 24px;
}
.top-title {
  padding: 12px 24px;
  display: flex;
  align-items: center;
  background-color:#fff2eb;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin-bottom: 24px;
  img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }
  .top-text {
    font-weight: bold;
    font-size: 16px;
    color: #333;
  }
}
.red-text {
  color: #FF4E5F;
}
</style>
